<style>
  .layui-form-label{
    text-align: left;
  }
  .liactive{
    background: #dcdcdc;
  }
</style>
<title>添加部门</title>
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>系统管理</cite></a>
    <a><cite>结构管理</cite></a>
    <a><cite>添加部门</cite></a>
  </div>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-card">
      <div class="layui-card-header">添加部门</div>
      <div class="layui-card-body layui-form" style="padding: 15px;">
        <!--<form class="layui-form" action="" lay-filter="component-form-group">-->
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label required">部门名称</label>
              <div class="layui-input-inline">
                <input type="text" name="deptName" lay-verify="required|deptName" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">上级部门</label>
              <div class="layui-input-inline">
                <input type="hidden" id="parentId" name="parentId" value=""/>
                <input type="text" id="parentName" disabled="disabled" name="parentName" lay-verify="required|loginName" autocomplete="off" placeholder="请选择" class="layui-input">
              </div>
              <button class="layui-btn" id="parent-btn">请选择</button>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label required">部门编码</label>
              <div class="layui-input-inline">
                <input type="text" name="deptCode" id="deptCode" lay-verify="required|deptCode" autocomplete="off" placeholder="请输入部门编码" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item" style="text-align: right">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit="" lay-filter="component-form-ts-dept">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              <a lay-href="/dept/list" class="layui-btn layui-btn-primary">
                <i class="layui-icon layui-icon-return"></i>返回
              </a>
            </div>
          </div>
        <!--</form>-->
      </div>
    </div>
  </div>
</div>
<script>
layui.use(['admin','table','tree','format','common'], function(){
  var $ = layui.$,admin = layui.admin
          ,common = layui.common
          ,layer = layui.layer
          ,form = layui.form;
  /* 自定义验证规则 */
  form.verify({
    deptName: function(value){
      if(value.length < 3){
        return '部门至少得3个字符啊';
      }
    }
  });
  /* 监听提交 */
  form.on('submit(component-form-ts-dept)', function(data){
    admin.req({
       url: common.basePath+'system/tsDept/saveTsDept.do' //实际使用请改成服务端真实接口
      ,data: data.field
      ,type:'get'
      ,done: function(res){
           console.log(res);
           if(res.code == 0){
             /*layer.msg("<em style='color:red'>" + res.msg + "</em>", {time: 90200, icon: 5},function(){ location.hash = '/dept/list';});*/
             layer.msg(res.msg, {
               offset: '15px'
               ,icon: 1
               ,time: 1000
             }, function(){
               location.hash = '/dept/list';
             });
           }else {
             layer.msg(res.msg, {
               offset: '200px'
               , icon: 2
               , time: 1000
             }, function () {
             });
             return ;
           }
      },success:function (res) {
      },error:function (res) {
      }});
    return false;
  });

  /**
   * 防止多个进行绑定事件
   */
  $('#parent-btn').off('click');
  $('#parent-btn').on('click', function(){
    var deptId ="";
    var deptName="";
    var deptCode="";
    layer.closeAll();
    var html ="<div><ul id='dept-tree'></ul></div>" ;
    layer.open({
      type: 1,
      /*zIndex: layer.zIndex-1,*/
      area:['400px','400px'],
      title:'上级部门',
      scrollbar:true,
      btn:['确定','取消'],
      content: html, //注意，如果str是object，那么需要字符拼接。
      yes:function (index, layero) {
        $('#parentId').val(deptId);
        $('#parentName').val(deptName);
        $('#deptCode').val(deptCode);
        layer.close(index);
      },
      btn2:function (index) {
        layer.close(index);
      },
      cancel:function () {

      }
    }
    );
    $.post(common.basePath+'system/tsDept/getDeptAndChildDepts.do', {access_token: layui.data('layuiAdmin').access_token}, function(res){
      var data = eval (res);
      layui.tree({
        elem: '#dept-tree' //传入元素选择器
        ,nodes: data
        ,click: function(item){
          deptId = item.id ;
          deptName = item.name ;
          deptCode = item.code;
        }
      });

    });


    /**
     * 清除样式
     */
    $("body").on("mousedown",".layui-tree a",function(){
     // if(!$(this).siblings('ul').length){
        $(".layui-tree a cite").parent().removeClass('liactive') ; //css('color','#333');
        $(this).find('cite').parent().addClass('liactive'); //.css('color','red');
     // }
    });
  });


});
</script>